<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <style>
        #main{
            width: 600px;
            height:400px;
        }
    </style>
</head>
<body>
<div><button class="layui-btn" onclick="loadEcharts()">加载图表</button> </div>

<div id="main" ></div>
</body>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '签到系统'
        },
        tooltip: {
            trigger:'axis'
        },
        legend: {
            data: ['部门']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

        },
        yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
        },
        series: [{
            name: '次数',
            type: 'bar',
            data: [2, 8, 10, 12, 10, 20]
        }]
    };
    myChart.setOption(option);

    function loadEcharts(){
        $.ajax({
            url:"http://localhost:8080/oasys/sign/form.do",
            method:"get",
            success:function(r){
                console.log(r);

                option.xAxis.data=r.names;
                option.series[0].data=r.nums;
                console.log(r.nums);
                // console.log(option);
                myChart.setOption(option);
            }
        })



    }
    // 使用刚指定的配置项和数据显示图表。

</script>
</html>
